

<style type="text/css">
	html,
	body {
		height: 100%;
		margin: 0;
		width: 100%;
		padding: 0;
		overflow: hidden;
		font-size: 13px;
	}

	p {
		margin: 0;
		padding: 0;
	}

	#container {
		height: 95vw;
		width: 100vw;
		margin: 0 auto;
	}

	#tip {
		background-color: #fff;
		padding-left: 3%;
		padding-right: 3%;
		position: fixed;
		left: 0;
		top: 44px;
		width: 100%;
		line-height: 2.5rem;
		height: 2.5rem;
		border: none;
		border-bottom: 1px solid #eee;
		z-index: 19999;
	}

	#tip input {
		width: 85%;
		height: 2rem;
		line-height: 2rem;
		border: none;
		outline: none;
	}

	#tip span {
		width: 15%;
		text-align: center;
		height: 2.5rem;
		line-height: 2.5rem;
		color: #757575;
	}




	.left span {
		margin-left: 2.85vw;
		margin-right: 2.85vw;
	}





	.left {
		width: 80%;
		line-height: 2rem;
		overflow: hidden;
		float: left;
	}



	.left .info {
		width: calc(100% - 5.7% - 8px);
		width: -webkit-calc(100% - 5.7% - 8px);
		width: -moz-calc(100% - 5.7% - 8px);
	}
</style>

<div class="bg-gray">
	<header class="mui-bar mui-bar-nav head-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href='@Url.Action("Index","Home")'></a>
		<h1 class="mui-title">确定标记点</h1>
		<a class="mui-icon mui-icon-more mui-pull-right" onclick="jsBridge.share()"></a>
	</header>

	<div id="container" class="map" tabindex="0"></div>
	<div id='tip'>
		<input type="text" name="search" id="search" value="" placeholder="输入关键字搜索地址" />
	</div>

	<ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media address">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="/images/address.png">
                <div class="mui-media-body">
                    地址
                    <p class='mui-ellipsis info'></p>
                </div>
            </a>
        </li>
		<li class="mui-table-view-cell mui-media poi">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="/images/detail.png">
				<div class="mui-media-body ">
					详细地址
					<p class='mui-ellipsis nearpoi'></p>
				</div>
			</a>
		</li>


	</ul>
	<div class="toinfo-detail-flexed-box">
		<a href='javascript:;' data-state="0" id="state" class="mui-btn mui-btn-block">
			切换模式
		</a>
		<a href='javascript:;' onclick="sub()" class="mui-btn mui-btn-block mui-btn-yellow">
			确定
		</a>
	</div>
</div>
@section Scripts{
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.11&key=f5a03f5e59d4b71b6e7c7aef2fb89c30&plugin=AMap.ToolBar"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

<script type="text/javascript" charset="utf-8">
	var lat = "";
	var lng = "";
	AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], function(PositionPicker, PoiPicker) {
		var map = new AMap.Map('container', {
			resizeEnable: true,
			rotateEnable: true,
			showBuildingBlock: true,
			showIndoorMap: true
		});
		var poiPicker = new PoiPicker({
			input: 'search',
			placeSearchOptions: {
				map: map,
				pageSize: 6 //关联搜索分页
			}

		});
		//添加卫星视图
		var layer1 = new AMap.TileLayer.Satellite();
		map.add(layer1);


		$("#state").click(function() {
			if ($(this).data("state") === '0') {
				map.remove(layer1);
				$(this).data("state", '1');
			} else {
				map.add(layer1);
				$(this).data("state", '0');
			}

		})
		// 加载定位插件，实现定位功能

		AMap.plugin('AMap.Geolocation', function() {
			geolocation = new AMap.Geolocation({
				enableHighAccuracy: true, //是否使用高精度定位，默认:true
				timeout: 10000, //超过10秒后停止定位，默认：无穷大
				maximumAge: 0, //定位结果缓存0毫秒，默认：0
				showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
				showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
				buttonPosition: 'RB',
				panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
				zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野s内可见，默认：false
			});
			map.addControl(geolocation);
			geolocation.getCurrentPosition();
			AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
			AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
		});

		// 搜索选址

		poiPicker.on('poiPicked', function(poiResult) {
			poiPicker.hideSearchResults();

			map.panTo([poiResult.item.location.lng, poiResult.item.location.lat]);
		});

		function onComplete(data) {
			lat = data.position.lat;
			lng = data.position.lng;
			$('.address .info').text(data.formattedAddress)
		}
		//解析定位错误信息
		function onError(data) {
			$('.address .info').text('定位失败！');
		}
		var positionPicker = new PositionPicker({
			mode: 'dragMap',
			map: map
		});
		// 拖拽选址
		positionPicker.on('success', function(positionResult) {
			lat = positionResult.position.lat;
			lng = positionResult.position.lng;
			$('.poi .nearpoi').text(positionResult.nearestJunction)
			$('.address .info').text(positionResult.address)
		});
		positionPicker.on('fail', function(positionResult) {
			$('.poi .nearpoi').text('')
			$('.address .info').text('')
		});
		var onModeChange = function(e) {
			positionPicker.setMode(e.target.value)
		}
		positionPicker.start();
		map.panBy(0, 1);
	});

	function sub() {
		// 提交地址相关操作
		location.href = "/Map/Add?lng=" + lng + "&lat=" + lat+"&id=@Context.Request.Query["id"]"+"&address="+$('.address .info').text()+"&detail="+$('.poi .nearpoi').text();
	}
</script>
}
